<template>
  <div>
    <div>
      <h1>权限分配</h1>
    </div>
    <el-form>
      <el-row>
        <el-form-item label="请选择管理员：">
          <el-select v-model="selectedRoleId" @change="handleRoleChange">
            <template v-for="item in roleOptions">
              <el-option
                v-if="item.roleId != 1"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
              >
              </el-option>
            </template>
          </el-select>
          <el-button
            :disabled="!changeButton"
            style="width: 200px; margin-left: 200px"
            @click="checkChangePer"
            type="success"
            >确认修改</el-button
          >
        </el-form-item>
      </el-row>
      <el-row>
        <tree-transfer
          :title="title"
          :from_data="fromData"
          :to_data="toData"
          :defaultProps="{ label: 'menuName' }"
          node_key="menuId"
          pid="parentId"
          @add-btn="handleAddBtn"
          @remove-btn="handleRemoveBtn"
          :mode="mode"
          height="540px"
          filter
          openAll
        >
        </tree-transfer>
      </el-row>
    </el-form>
    <div style="text-align: center"></div>
  </div>
</template>

<script>
import treeTransfer from "el-tree-transfer"; // 引入
import {
  getMenuByIdQuery,
  getAllRoleQuery,
  changePerMenuQuery,
} from "@/api/menu";
export default {
  components: { treeTransfer }, // 注册
  data() {
    return {
      selectedRoleId: null,
      mode: "transfer", // transfer addressList
      fromData: [],
      toData: [],
      roleOptions: [],
      title: ["未分配权限", "已分配权限"],
      changeButton: false,
    };
  },
  methods: {
    //切换切换角色
    handleRoleChange() {
      getMenuByIdQuery(this.selectedRoleId).then((res) => {
        console.log(res);
        this.fromData = res.data.fullNoPerMenu;
        this.toData = res.data.roleMenu;
      });
    },

    //查询所有角色
    getRoleOptionHandler() {
      getAllRoleQuery()
        .then((res) => {
          this.roleOptions = res.data;
        })
        .catch(() => {});
    },
    // 监听穿梭框组件添加
    handleAddBtn(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      this.toData = toData;
      this.changeButton = true;
    },
    // 监听穿梭框组件移除
    handleRemoveBtn(fromData, toData, obj) {
      this.toData = toData;
      this.changeButton = true;
    },
    //修改权限菜单
    checkChangePer() {
      this.$confirm("是否确认权限菜单分配？", {
        confirmButtonText: "确认修改",
        cancelButtonText: "取消修改",
      })
        .then(() => {
          const data = {
            roleId: this.selectedRoleId,
            menuList: this.toData,
          };
          changePerMenuQuery(data).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.data);
            }
          });
          this.changeButton = false;
        })
        .catch(() => {
          this.$message.success("已取消修改！");
        });
    },
  },
  created() {
    this.getRoleOptionHandler();
  },
};
</script>


<style></style>